<template>
    <div>
        <van-nav-bar
            title="设置"
            left-text=""
            fixed="true"
            left-arrow
            @click-left="onClickLeft"
        />
        <div class="box">
            <van-cell title="单元格" value="内容" size="large" :border="false">
                <template #title> 阅读时不自动锁屏 </template>
                <template #value>
                    <van-switch class="zujian1" v-model="checked" size="20" />
                </template>
            </van-cell>
            <van-cell title="单元格" value="内容" size="large" :border="false">
                <template #title> 阅读时允许横屏 </template>
                <template #value>
                    <van-switch class="zujian1" v-model="checked2" size="20" />
                </template>
            </van-cell>
            <van-cell title="单元格" value="内容" size="large" :border="false">
                <template #title> 阅读时隐藏别人的想法 </template>
                <template #value>
                    <van-switch class="zujian1" v-model="checked3" size="20" />
                </template>
            </van-cell>
            <van-cell title="单元格" value="内容" size="large" :border="false">
                <template #title> 正文首行缩进 </template>
                <template #value>
                    <van-switch class="zujian1" v-model="checked4" size="20" />
                </template>
            </van-cell>
            <van-cell title="单元格" value="内容" size="large" :border="false">
                <template #title> 点击左侧翻到下一页 </template>
                <template #value>
                    <van-switch class="zujian1" v-model="checked5" size="20" />
                </template>
            </van-cell>
            <van-cell-group :border="false">
                <van-cell
                    title="翻页方式"
                    size="large"
                    :border="false"
                    is-link
                    value="上下滚动"
                />
                <van-cell
                    title="深色模式"
                    size="large"
                    :border="false"
                    is-link
                    value="跟随系统"
                />
            </van-cell-group>
        </div>
        <div class="box">
            <van-cell-group :border="false">
                <van-cell
                    title="隐私"
                    size="large"
                    :border="false"
                    is-link
                    value=""
                />
                <van-cell
                    title="青少年模式"
                    size="large"
                    :border="false"
                    is-link
                    value="未开启"
                />
                <van-cell
                    title="通知"
                    size="large"
                    :border="false"
                    is-link
                    value=""
                />
                <van-cell
                    title="清理缓存"
                    size="large"
                    :border="false"
                    is-link
                    value=""
                />
            </van-cell-group>
        </div>

        <div class="box">
            <van-cell-group :border="false">
                <van-cell
                    title="关于微信读书"
                    size="large"
                    :border="false"
                    is-link
                    value=""
                />
                <van-cell
                    title="关注公众号"
                    size="large"
                    :border="false"
                    is-link
                    value=""
                />
                <van-cell
                    title="帮助和反馈"
                    size="large"
                    :border="false"
                    is-link
                    value=""
                />
            </van-cell-group>
             <van-button
                type="primary"
                block
                color="white"
                style="color: rgb(240, 24, 24)"
                @click="logout"
                >退出登录</van-button
            >
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant'
import { ref } from 'vue'
import { useStore } from 'vuex'

export default {
    setup() {
        const store = useStore()
        const checked = ref(true)
        const onClickLeft = () => history.back()
        const checked2 = ref(true)
        const checked3 = ref(true)
        const checked4 = ref(true)
        const checked5 = ref(true)
        const logout = async () => {
            try {
                await store.dispatch('user/logout')
                Toast.success({
                    message: '退出登录',
                    forbidClick: true,
                    duration: 1000,
                })
            } catch (error) {}
        }
        return {
            onClickLeft,
            checked2,
            checked,
            checked3,
            checked4,
            checked5,
            logout,
        }
    },
}
</script>

<style>
* {
    padding: 0;
    margin: 0;
}




.box {
    width: 100%;
    height: 110%;
    margin-bottom: 5px;
}
</style>
